<template>
  <div>
    <el-card>
      <el-form>
        <el-row type="flex">
          <el-col :span="8">
            <el-form-item label="运单编号：" label-width="120px">
              <el-input v-model="page.id" placeholder="请输入快递员账户"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单编号：" label-width="120px">
              <el-input v-model="page.orderId" placeholder="请输入快递员姓名"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="调度状态：" label-width="120px">
              <el-select v-model="page" placeholder="请选择">
                <el-option
                  v-for="item in list1"
                  :key="item.schedulingStatus"
                  :label="item.value"
                  :value="item.schedulingStatus"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="8">
            <el-form-item label="起始地机构：" label-width="120px">
              <TreeSelect
                v-model="page.agentId"
                :normalizer="normalizer"
                :options="treeData"
                placeholder="请选择起始地机构"
                :appendToBody="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目的地机构：" label-width="120px">
              <TreeSelect
                v-model="page.agentId"
                :normalizer="normalizer"
                :options="treeData"
                placeholder="请选择目的地机构"
                :appendToBody="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="当前所在机构：" label-width="120px">
              <TreeSelect
                v-model="page.agentId"
                :normalizer="normalizer"
                :options="treeData"
                placeholder="请选择当前所在机构"
                :appendToBody="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
         <el-button type="danger" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="first">
          <span slot="label">全部{{total}}</span>
          <as-table :listdata="listdata" :total="total"></as-table>
        </el-tab-pane>
        <el-tab-pane status="1">
          <span slot="label">新建{{tabsList[0]}}</span>
          <as-table :listdata="listdata" :total="total"></as-table>
        </el-tab-pane>
        <el-tab-pane  status="2">
          <span slot="label">已装车{{tabsList[1]}}</span>
          <as-table :listdata="listdata" :total="total"></as-table>
        </el-tab-pane>
        <el-tab-pane status="3">
          <span slot="label">运输中{{tabsList[2]}}</span>
          <as-table :listdata="listdata" :total="total"></as-table>
        </el-tab-pane>
        <el-tab-pane status="4">
          <span slot="label">到达终端网点{{tabsList[3]}}</span>
          <as-table :listdata="listdata" :total="total"></as-table>
        </el-tab-pane>
        <el-tab-pane status="6">
          <span slot="label">拒收{{tabsList[4]}}</span>
          <as-table :listdata="listdata"></as-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { GetListApi } from '@/api/instiution'
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import asTable from './table'
import { getWaybillCount, getWaybillPage } from '@/api/waiball'

export default {
  components: { TreeSelect, asTable },
  name: 'Waybill',
  data () {
    return {
      page: {
        page: 1,
        pageSize: 10,
        schedulingStatus: '',
        id: '',
        orderId: '',
        startAgencyId: '', // q起始地机构
        endAgencyId: '', // 目的地机构
        currentAgencyId: ''// 当前所在机构
      },
      treeData: [],
      list1: [
        {
          schedulingStatus: '1',
          value: '待调度'
        },
        {
          schedulingStatus: '2',
          value: '未匹配路线'
        },
        {
          schedulingStatus: '3',
          value: '已调度'
        }
      ],
      activeName: 'first',
      listdata: [], // 表格数据,传给子组件
      total: 0, // 总条数
      tabsList: {}, // tab列表的对应数字
      that: this

    }
  },
  created () {
    this.getTreeData()
    this.getWaybillCount()
  },
  filters: {
    changeCapitalLetter (value) {
      console.log(value)
      // console.log(that)
      // const data = this.$store.state.user.tabsList
      // console.log(data)
      // for (const key in data) {
      //   console.log(key)
      //   if (key === value) {
      //     return data[key]
      //   }
      // }
    }
  },
  methods: {
    normalizer (node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    // 搜索
    search () {

    },
    // 重置
    reset () {

    },
    // 获取机构树
    async getTreeData () {
      const res = await GetListApi()
      this.treeData = JSON.parse(res.data)
      console.log(this.treeData)
    },
    async handleClick () {
      console.log(this.activeName)
      if (this.activeName === '1') {
        const res = await getWaybillPage({ page: 1, pageSize: 10, status: 1 })
        console.log(res)
        this.listdata = res.data.items
        this.total = +res.data.counts
      } else if (this.activeName === '2') {
        const res = await getWaybillPage({ page: 1, pageSize: 10, status: 2 })
        console.log(res)
        this.listdata = res.data.items
        this.total = +res.data.counts
      } else if (this.activeName === '3') {
        const res = await getWaybillPage({ page: 1, pageSize: 10, status: 3 })
        console.log(res)
        this.listdata = res.data.items
        this.total = +res.data.counts
      } else if (this.activeName === '4') {
        const res = await getWaybillPage({ page: 1, pageSize: 10, status: 4 })
        console.log(res)
        this.listdata = res.data.items
        this.total = +res.data.counts
      } else if (this.activeName === '5') {
        const res = await getWaybillPage({ page: 1, pageSize: 10, status: 6 })
        console.log(res)
        this.listdata = res.data.items
        console.log(this.listdata)
        this.total = +res.data.counts
      } else {
        const res = await getWaybillPage({ page: 1, pageSize: 10 })
        console.log(res)
        this.listdata = res.data.items
        console.log(this.listdata)
        this.total = +res.data.counts
        console.log(this.total)
      }
    },
    // 获取运单数量
    async getWaybillCount () {
      const res = await getWaybillCount()
      console.log(res.data)
      this.tabsList = Object.values(res.data)
      console.log(this.tabsList)
      // this.$dispatch('')
      // this.$store.dispatch(('user/saveTabsList', this.tabsList))
      this.$store.dispatch('user/saveTabsList', res.data)
    }
  }
}
</script>
